<template>
  <el-card class="form-container" shadow="never">
    <!--    <el-steps :active="active" finish-status="success" align-center>-->
    <!--      <el-step title="填写商品信息"></el-step>-->
    <!--      <el-step title="填写商品促销"></el-step>-->
    <!--      <el-step title="填写商品属性"></el-step>-->
    <!--      <el-step title="选择商品关联"></el-step>-->
    <!--    </el-steps>-->
    <product-info-detail
      v-show="showStatus[0]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep"
      @finishCommit="finishCommit"
      @update="handleParamUpdate"
    >
      <!--@update="handleParamUpdate"-->
    </product-info-detail>
  </el-card>
</template>
<script>
import ProductInfoDetail from "./ProductInfoDetail";
import ProductSaleDetail from "./ProductSaleDetail";
import ProductAttrDetail from "./ProductAttrDetail";
import ProductRelationDetail from "./ProductRelationDetail";
import { createProduct, getProduct, updateProduct } from "@/api/product-1";
import { dateUnits } from "@/utils/constant/pms";
import { fetchMetaInfo, saveMeta } from "@/api/product";
import { formatCentToYuan, formatYuanToCent } from "@/utils/format";

const defaultProductParam = {
  claimAmount: 0,
  endPurchaseAge: 1,
  endUnit: Number(dateUnits.getName("周岁")),
  formType: undefined,
  formUrl: "",
  insuranceFileUrl: "",
  metaName: "",
  metaType: undefined,
  price: undefined,
  remark: "",
  startPurchaseAge: 0,
  startUnit: Number(dateUnits.getName("天")),
  supplierId: undefined,
};
export default {
  name: "ProductDetail",
  components: {
    ProductInfoDetail,
    ProductSaleDetail,
    ProductAttrDetail,
    ProductRelationDetail,
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      active: 0,
      productParam: Object.assign({}, defaultProductParam),
      showStatus: [true, false, false, false],
    };
  },
  created() {
    if (this.isEdit) {
      fetchMetaInfo(this.$route.query.id).then(({ data = {} }) => {
        const result = Object.assign({}, data, {
          singleLimit: formatCentToYuan(data.singleLimit),
          claimAmount: formatCentToYuan(data.claimAmount),
          price: formatCentToYuan(data.price),
        });
        this.productParam = result;
      });
    }
  },
  methods: {
    handleParamUpdate(key, value) {
      console.log("fuck");
      this.productParam[key] = value;
    },
    hideAll() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false;
      }
    },
    prevStep() {
      if (this.active > 0 && this.active < this.showStatus.length) {
        this.active--;
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    nextStep() {
      if (this.active < this.showStatus.length - 1) {
        this.active++;
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    finishCommit(isEdit) {
      this.$confirm("是否要提交该产品", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const {
          createdAt,
          createdBy,
          updatedAt,
          updatedBy,
          singleLimit,
          claimAmount,
          price,
          // insuranceFileUrl = [],
          ...rest
        } = this.productParam;
        if (isEdit) {
          saveMeta({
            // insuranceFileUrl: insuranceFileUrl ? insuranceFileUrl[0] : "",
            ...rest,
            singleLimit: formatYuanToCent(singleLimit),
            claimAmount: formatYuanToCent(claimAmount),
            price: formatYuanToCent(price),
          }).then((response) => {
            this.$message({
              type: "success",
              message: "提交成功",
              duration: 1000,
            });
            this.$router.back();
          });
        } else {
          saveMeta({
            // insuranceFileUrl: insuranceFileUrl ? insuranceFileUrl[0] : "",
            ...rest,
            singleLimit: formatYuanToCent(singleLimit),
            claimAmount: formatYuanToCent(claimAmount),
            price: formatYuanToCent(price),
          }).then((response) => {
            this.$message({
              type: "success",
              message: "提交成功",
              duration: 1000,
            });
            this.$router.back();
          });
        }
      });
    },
  },
};
</script>
<style>
.form-container {
  width: 960px;
}
.form-inner-container {
  width: 800px;
}
</style>
